@using BlazorSortableList.DemoApp.Client.Models

@* remove bootstrap borders *@
<style>
    .card {
        box-shadow: none !important;
        border: none !important;
    }

    .card-header {
        box-shadow: none !important;
        border-bottom: none !important;
    }
</style>

<div class="container">
    <h1 class="title is-size-1 has-text-centered">Cloning</h1>
    <p class="mb-4">Cloning is enabled by the "Pull='Clone'" property. This allows cloning of an item by dropping it into a shared list.</p>
    <TabControl>
        <TabPage Title="Example">
            <div class="columns">
                <div class="column">
                    <SortableList Id="clone1" Group="cloning" Pull="clone" Items="items1" Context="item" OnRemove="ListOneRemove">
                        <SortableItemTemplate>
                            <div class="card has-border-light has-background-blazor has-text-white">
                                <p class="is-size-4 p-2 custom-border">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
                <div class="column">
                    <SortableList Id="clone2" Group="cloning" Pull="clone" OnRemove="ListTwoRemove" Items="items2" Context="item">
                        <SortableItemTemplate>
                            <div class=" card has-border-light has-background-blazor has-text-white">
                                <p class="is-size-4 p-2 custom-border">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
            </div>
        </TabPage>
        <TabPage Title="Code">
            <pre>@codeContent1</pre>
        </TabPage>
        <TabPage Title="Example V1.2">
            <div class="columns">
                <div class="column">
                    <SortableList Id="@ListId1" GroupModel="@_group" Context="item">
                        <SortableItemTemplate>
                            <div class=" card has-border-light has-background-blazor1">
                                <p class="is-size-4 p-2 custom-border">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
                <div class="column">
                    <SortableList Id="@ListId2" GroupModel="@_group" Context="item">
                        <SortableItemTemplate>
                            <div class=" card has-border-light has-background-blazor1">
                                <p class="is-size-4 p-2 custom-border">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
            </div>
        </TabPage>
        <TabPage Title="Code V1.2">
            <pre>@codeContent2</pre>
        </TabPage>

    </TabControl>
</div>

@code {
    private const string ListId1 = "SharedListCloneId1";
    private const string ListId2 = "SharedListCloneId2";
    private const string GroupId = "CommonGroupClone";

    private string codeContent1 = $@"
    <SortableList Group=""cloning"" Pull=""clone"" Items=""items1"" Context=""item"" OnRemove=""ListOneRemove"">
        <SortableItemTemplate>
            <div class="" card has-border has-background-white"">
                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
            </div>
        </SortableItemTemplate>
    </SortableList>
    <SortableList Group=""cloning"" Pull=""clone"" OnRemove=""ListTwoRemove"" Items=""items2"" Context=""item"">
        <SortableItemTemplate>
            <div class=""card has-background-white has-border"">
                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
            </div>
        </SortableItemTemplate>
    </SortableList>

    @code {{
        private void ListOneRemove((int oldIndex, int newIndex) indices)
        {{
            var item = items1[indices.oldIndex];
            var clone = item;

            items1.Remove(items1[indices.oldIndex]);
        }}

        private void ListTwoRemove((int oldIndex, int newIndex) indices)
        {{
            var item = items2[indices.oldIndex];
            var clone = item;

            items2.Remove(items2[indices.oldIndex]);
        }}
    }}
    ";

    private string codeContent2 = @"
    SortableList Id=""@ListId1"" GroupModel=""@_group"" Context=""item"">
        <SortableItemTemplate>
            <div class="" card has-border-light has-background-blazor1"">
                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
            </div>
        </SortableItemTemplate>
    </SortableList>
    <SortableList Id=""@ListId2"" GroupModel=""@_group"" Context=""item"">
        <SortableItemTemplate>
            <div class="" card has-border-light has-background-blazor1"">
                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
            </div>
        </SortableItemTemplate>
    </SortableList>
    @code {
        private const string ListId1 = ""SharedListCloneId1"";
        private const string ListId2 = ""SharedListCloneId2"";
        private const string GroupId = ""CommonGroupClone"";

        public List<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $""Item {i}"" }).ToList();

        public List<Item> items2 = Enumerable.Range(11, 10).Select(i => new Item { Id = i, Name = $""Item {i}"" }).ToList();

        ClonedSortableListGroup _group;

        protected override async Task OnInitializedAsync()
        {
            await base.OnInitializedAsync();

            SortableListSettings settings = new SortableListSettings() { CloneMode = true };
            _group = new ClonedSortableListGroup(ListId1, ListId2, () => StateHasChanged());
            _group.AddModel(ListId1, new SortableListModel<Item>(items1) { Group = GroupId, Settings = settings });
            _group.AddModel(ListId2, new SortableListModel<Item>(items2) { Group = GroupId, Settings = settings });
        }
    }
    ";

    public List<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

    public List<Item> items2 = Enumerable.Range(11, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

    ClonedSortableListGroup _group;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        SortableListSettings settings = new SortableListSettings() { CloneMode = true };
        _group = new ClonedSortableListGroup(() => StateHasChanged());
        _group.AddModel(ListId1, new SortableListModel<Item>(items1) { Group = GroupId, Settings = settings });
        _group.AddModel(ListId2, new SortableListModel<Item>(items2) { Group = GroupId, Settings = settings });
    }

    private void ListOneRemove((int oldIndex, int newIndex) indices)
    {
        // get the item at the old index in list 1
        var item = items1[indices.oldIndex];

        var clone = item;

        // add it to the new index in list 2
        items2.Insert(indices.newIndex, clone);
    }

    private void ListTwoRemove((int oldIndex, int newIndex) indices)
    {
        // get the item at the old index in list 2
        var item = items2[indices.oldIndex];

        // make a copy
        var clone = item;

        // add it to the new index in list 1
        items1.Insert(indices.newIndex, clone);
    }

}
